<template>
  <div>
    <el-dialog :title="title" :visible.sync="visible" width="30%" center :close-on-click-modal="false">
      <slot></slot>
      <span slot="footer" class="dialog-footer">
        <el-button class="cancelButton" @click="visible = false">取 消</el-button>
        <el-button class="okButton" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
    }
  },
  props: {
    popUpVisible: Boolean,
    fatherMethod: Function,
    title:{
      default:'',
      type:String,
      require:false
    }
  },
  model: {
    prop: 'popUpVisible',
    event: 'change'
  },
  watch: {
    'popUpVisible': {
      handler(newVal) {
        this.visible = newVal
      }
    },
    'visible': {
      handler(newVal) {
        this.$emit('change', newVal)
      }
    }
  },
  methods: {
    async submit() {
      this.fatherMethod()
      this.visible=false
    }

  }
}
</script>

<style>
.el-dialog {
  border-radius: 20px !important;
  background-color: #080A0B !important;
  margin-top: 30vh !important;
}

.el-dialog__title {
  color: white !important;
  font-weight: bold;
}

.el-dialog__headerbtn:focus .el-dialog__close,
.el-dialog__headerbtn:hover .el-dialog__close {
  color: white !important;
}

.dialog-input {
  background-color: #080A0B !important;
}

.cancelButton {
  width: 40%;
  margin: 0 10px !important;
  color: white !important;
  background-color: #333333 !important;
  border: none !important;
  border-radius: 20px !important;
}

.okButton {
  width: 40%;
  margin: 0 10px !important;
  color: black !important;
  background-color: #ffffff !important;
  border: none !important;
  border-radius: 20px !important;
}
</style>